<template>
    <div class='container'>
        <div class='header'>
            <el-input v-model="searchCompanyCode" placeholder='请输入公司名称'></el-input>
            <el-button style="margin-left: 10px" type='primary'  icon="el-icon-search" @click="searchStock">搜索</el-button>
            <el-button style="margin-left: 10px" type="primary" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
        </div>
        <div class="table">
            <el-table
                :data="stockList"
                :stripe="true"
                border
                v-loading="tableLoading"
                element-loading-text="图标数据加载中...."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.)"
                style="width: 100%">
                <el-table-column
                    type="index"
                ></el-table-column>
                <el-table-column
                    prop="code"
                    label="股票代码"
                    align="center"
                >

                </el-table-column>
                <el-table-column
                    prop="name"
                    label="公司名称"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="涨幅"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.percent >0?'success':'danger'">{{scope.row.percent}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ma5"
                    label="5日均线"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="ma10"
                    label="10日均线"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="价格波动"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.price_abnml_ex ===0 ">正常</el-tag>
                        <el-tag type="danger" v-if="scope.row.price_abnml_ex ===1 ">异常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="交易量波动"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.vol_abnml_ex ===0 ">正常</el-tag>
                        <el-tag type="danger" v-if="scope.row.vol_abnml_ex ===1 ">异常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="市场"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.market_abnml_ex ===0 ">正常</el-tag>
                        <el-tag type="danger" v-if="scope.row.market_abnml_ex ===1 ">异常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="截至日期"
                    align="center"
                >
                </el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <div class='stock-graph'>
                            <StockGraph :id='props.row.code' :code="props.row.code"></StockGraph>
                        </div>
                        </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import StockGraph from '@/page/stock/component/StockGraph';
import {getStock, getStockList} from "@/api/stock";
export default {
    name: 'Index',
    components: { StockGraph },
    data(){
        return{
            stockList: [],
            pagination:{
                pageSize:10,
                pageNum:1,
                total:100
            },
            tableLoading:false,
            searchCompanyCode:""
        }
    },
    methods:{
        async getStockData(){
            this.tableLoading=true
            await getStockList(this.pagination).then((response)=>{
                console.log(response)
                let data= response.data.data
                this.pagination.total=data.count
                this.stockList=data.stocks
                console.log(this.stockList)
                console.log(data)
            }).catch((err)=>{
                console.log(err)
            })
            this.tableLoading=false
        },
        handleSizeChange(size){
            console.log("size",size)
            this.pagination.pageSize=size
            this.getStockData()
        },
        handleCurrentChange(page){
            console.log("page",page)
            this.pagination.pageNum=page
            this.getStockData()
        },
        async searchStock(){
            await getStock(this.searchCompanyCode).then((response)=>{
                this.tableLoading=true
                let data = response.data.data
                if (data.stock.length === 0){
                    this.$message({
                        type:"warning",
                        message:"未查询到"+this.searchCompanyCode+"的相关信息"
                    })
                }else {
                    this.stockList=data.stock
                }
                this.tableLoading=false

            }).catch(()=>{
                this.$message({
                    type:"error",
                    message:"查询失败"
                })
            })
        },
        handleReset(){
            this.searchCompanyCode=""
            this.pagination.pageNum=1
            this.pagination.pageSize=10
            this.getStockData()
        }
    },
    beforeMount() {
        this.getStockData()
    }
};
</script>

<style scoped lang='scss' >
.container{
    height: 95%;
    padding: 0 10px;

    .header{
        display: flex;
        justify-content: left;
        align-items: center;
        background-color: #ffffff;
        padding: 5px 0px;

    }
    .el-input{
        width: 300px;
        margin-left: 10px;
    }
    .table{
        height: 95%;
        .stock-graph{
            width: 100%;
            height: 500px;
        }
    }
}
.pagination{
    display: flex;
    justify-content: right;
    padding-right: 20px;
    background-color: #ffffff;
    margin-top: 0px;
}

</style>